<template>
  <div class="zEcharts">
      <div class="map-container" id="myEcharts" ref="myEchart" style="height:100%;width:100%"></div>
  </div>
</template>
<script>
export default {
  name: 'zEcharts',
  data() {
      return {
          myEchart: '',
          optionChinaMap: {},//地图数据,等待接口数据
      }
  },
  props: {
      typeFlag: {
          type: Boolean,
          default: true
      }
  },
  mounted() {
      this.$nextTick(()=> {
          this.initEcharts();
      })
  },
  methods: {
      /**
       * 地图数据
      */
      randomData: function() {
          return Math.round(Math.random() * 1000);
      },
      /**
       * echarts实例话
      */
      initEcharts: function() {
          // echarts画图实例
          let chinaMapChart = null;
          // 画图区域
          chinaMapChart = this.$echarts.init(
              document.getElementById("myEcharts"),
              "macarons"
          );
          this.optionChinaMap = {
              tooltip: {
              trigger: "item"
              },
              legend: {
                  orient: "horizontal", //图例的排列方向
                  textStyle: { color: "#ccc" },
                  x: "left", //图例的位置
                  y: "-20000000000000",

                  // data: ["全国数据"]
              },

              visualMap: {
                  //颜色的设置  dataRange
                  textStyle: { color: "#ccc" },
                  x: "left",
                  y: "bottom",
                  splitList: [
                      // { start: 1500 },
                      // { start: 900, end: 1500 },
                      // { start: 310, end: 1000 },
                      // { start: 200, end: 300 },
                      // { start: 50, end: 200 },
                      { start: 0, end: 150000 }
                  ],
                  show: false,
                  // text:['高','低'],// 文本，默认为数值文本
                  color: ['rgb(50,88,124)']
                  // color: [
                  //     "#5475f5",
                  //     "#9feaa5",
                  //     "#3FA7FF",
                  //     "#66E0E3",
                  //     "#FFDC5E",
                  //     "#9fb5ea"
                  // ]
              },
              roamController: {//控制地图的上下左右放大缩小
                  show: true,
                  x: 'right',
                  mapTypeControl: {
                      'china': true
                  }
              },
              series: [
              {
                  name: "全国数据",
                  type: "map",
                  mapType: "china",
                  zoom: 1.1,//地图大小
                  roam: false, //是否开启鼠标缩放和平移漫游
                  itemStyle: {
                      //地图区域的多边形 图形样式
                      normal: {
                          //是图形在默认状态下的样式
                          label: {
                          show: true,
                          textStyle: { color: "rgb(249, 249, 249)" }//地图text样式
                          }
                      },
                      emphasis: {
                          //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                          label: { show: true }
                      }
                  },
                  top: "100", //组件距离容器的距离
                  data: [
                      { name: "上海", value: this.randomData() },
                      { name: "北京", value: "100" },
                      { name: "天津", value: this.randomData() },
                      { name: "重庆", value: this.randomData() },
                      { name: "河北", value: this.randomData() },
                      { name: "河南", value: this.randomData() },
                      { name: "云南", value: this.randomData() },
                      { name: "辽宁", value: this.randomData() },
                      { name: "黑龙江", value: this.randomData() },
                      { name: "湖南", value: this.randomData() },
                      { name: "安徽", value: this.randomData() },
                      { name: "山东", value: this.randomData() },
                      { name: "新疆", value: this.randomData() },
                      { name: "江苏", value: this.randomData() },
                      { name: "浙江", value: this.randomData() },
                      { name: "江西", value: this.randomData() },
                      { name: "湖北", value: this.randomData() },
                      { name: "广西", value: this.randomData() },
                      { name: "甘肃", value: this.randomData() },
                      { name: "山西", value: this.randomData() },
                      { name: "内蒙古", value: this.randomData() },
                      { name: "陕西", value: this.randomData() },
                      { name: "吉林", value: this.randomData() },
                      { name: "福建", value: this.randomData() },
                      { name: "贵州", value: this.randomData() },
                      { name: "广东", value: this.randomData() },
                      { name: "青海", value: this.randomData() },
                      { name: "西藏", value: this.randomData() },
                      { name: "四川", value: this.randomData() },
                      { name: "宁夏", value: this.randomData() },
                      { name: "海南", value: this.randomData() },
                      { name: "台湾", value: this.randomData() },
                      { name: "香港", value: this.randomData() },
                      { name: "澳门", value: this.randomData() }
                  ]
              }
              ]
          };
          chinaMapChart.setOption(this.optionChinaMap, true);
      },
      
  }
}
</script>
<style lang="stylus" scoped>
.zEcharts
  width 100%
  height 100%
</style>